<template>
  <view class="push-container">
    <view class="main-container">
      <view class="alert warning">
        <view class="alert-wrapper">
          <view class="icon">
            <i class="iconfont icon-quan"></i>
          </view>
          <view class="message">
            <span v-if="orderStatus === $config.ORDER_STATUS_ENUM.notuse" @click="toQrcodePage">订单已支付，点击待核销</span>
            <span v-if="orderStatus === $config.ORDER_STATUS_ENUM.pendding" @click="pushOrder">订单未支付，请前往支付</span>
            <span v-if="orderStatus === $config.ORDER_STATUS_ENUM.complete">已使用，欢迎再来一单</span>
          </view>
          <view class="action">
            <i class="iconfont icon-gengduo"></i>
          </view>
        </view>
      </view>
      <view class="alert info">
        <view class="alert-wrapper">
          <view class="icon">
            <i class="iconfont icon-ship"></i>
          </view>
          <view class="message">
            <span>您已成功下单，请在规定日期入园核销，园区内提供停车服务</span>
            <br />
            <span>2020-10-23 15:30</span>
          </view>
          <view class="action">
            <i class="iconfont icon-gengduo"></i>
          </view>
        </view>
      </view>
      <view class="alert info">
        <view class="alert-wrapper">
          <view class="icon">
            <i class="iconfont icon-gerenzhongxin"></i>
          </view>
          <view class="message">
            <span>{{ user.name }}</span>
            <span>{{ user.mobileNumber.split(0, 3) + " **** " + user.mobileNumber.split(-1, 4) }}</span><br />
            预约时间：{{ appointmentDate }}
          </view>
          <view class="action">
            <i class="iconfont icon-gengduo"></i>
          </view>
        </view>
      </view>
      <view class="good-info-container">
        <view class="title">商品信息</view>
        <view class="content">
          <view class="good-img-container">
            <img :src="imgUrl" alt="">
            <view class="info-container">
              <view class="good-name">{{ title }}</view>
              <view class="price-count">
                <span class="price">{{ price }}</span>
                <i class="iconfont icon-chushaixuanxiang"></i>
                <span class="count">{{ quantity }}</span>
              </view>
              <view class="total-price">¥ {{ price * quantity }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="order-info-container">
        <view class="title">商品信息</view>
        <view class="content">
          <view class="item-container">
            <view class="label">费用合计</view>
            <view class="value">¥ {{ price * quantity }}</view>
          </view>
          <view class="item-container">
            <view class="label">票数</view>
            <view class="value">{{ quantity }} 张</view>
          </view>
          <view class="item-container">
            <view class="label">订单编号</view>
            <view class="value">{{ sn }}</view>
          </view>
          <view class="item-container">
            <view class="label">提交时间</view>
            <view class="value">{{ createdAt }}</view>
          </view>
          <view class="item-container">
            <view class="label">支付方式</view>
            <view class="value">{{ paidThrough ? "微信支付" : "支付宝支付" }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="orderStatus === 0" class="footer-container">
      <view class="price">
        <text style="color: #999999; font-size: 14px;">¥</text>
        <text style="color: #FFB838">{{ price * quantity }}</text>
        <text style="color: #999999; font-size: 14px; margin-left: 5px; text-decoration: line-through;">门市价 ¥{{ marketPrice * quantity }}</text>
      </view>
      <view class="action-btn" :class="quantity < 1 ? 'disabled' : ''" @click="pushOrder">继续支付</view>
    </view>
  </view>
</template>
<script lang="ts">
import { getQuery, parseMD5, parseTime } from '@/util/common';
import { token, user } from '@/util/storage';
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      id: "",
      appid: "",
      productId: "",
      prepayId: "",
      appointmentDate: parseTime(new Date(), "{y}-{m}-{d}"),
      title: "",
      imgUrl: "",
      marketPrice: 0,
      price: 0,
      quantity: 0,
      orderStatus: -1,
      amount: 0,
      signType: "",
      createdAt: parseTime(new Date(), "{y}-{m}-{d}"),
      paidThrough: "",
      updatedDate: parseTime(new Date(), "{y}-{m}-{d}"),
      sn: "",
    };
  },
  computed: {
    parseTime: () => parseTime,
    user: () => JSON.parse(user.get()),
    redirect() {
      return encodeURI("/pages/order/detail");
    }
  },
  mounted() {
    this.id = getQuery().id;
    this.getOrderInfo();
  },
  methods: {
    toBack() {
      uni.navigateBack({ delta: 1 })
    },
    bgDynamic() {},
    getDate(i: number) {
      return new Date(new Date().getTime() + (i * 24 * 60 * 60 * 1000))
    },
    getWeek(i: number) {
      return ({ 0: '星期天', 1: "星期一", 2: "星期二", 3: "星期三", 4: "星期四", 5: "星期五", 6: "星期六" } as any)[i];
    },
    getOrderInfo() {
      this.$mainApi.apiGetOrderInfoById(this.id).then(res => {
        console.log(res.data);
        this.title = JSON.parse(res.data.productDetail).title;
        this.imgUrl = JSON.parse(res.data.productDetail).imageUrl;
        this.marketPrice = JSON.parse(res.data.productDetail).marketPrice;
        this.price = JSON.parse(res.data.productDetail).price;
        this.quantity = JSON.parse(res.data.productDetail).quantity;
        this.productId = res.data.productId;
        this.amount = res.data.amount;
        this.appid = res.data.appid;
        this.signType = res.data.signType;
        this.orderStatus = res.data.status;
        this.paidThrough = res.data.paidThrough;
        this.appointmentDate = parseTime(res.data.appointmentdAt, "{y}-{m}-{d}");
        this.updatedDate = parseTime(res.data.updatedAt, "{y}-{m}-{d}");
        this.sn = res.data.sn;
        this.createdAt = parseTime(res.data.createdAt, "{y}-{m}-{d}");
        this.prepayId = res.data.prepayId;
      });
    },
    clickAppointmentData(date: string) {
      console.log(date);
      this.appointmentDate = date;
    },
    wechatRandom() {
      const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
      const maxPos = $chars.length;
      let pwd = '';
      for (let i = 0; i < 32; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    },
    wechatSign(data: any) {
      const paramArr = [];
      let stringA = "";
      for (const name in data) {
        paramArr.push({ label: name, value: data[name] });
      }

      paramArr.sort((paramA, paramB) => { return paramA.label.charCodeAt(0) - paramB.label.charCodeAt(0) });
      paramArr.forEach((param: any) => { stringA += param.label + "=" + param.value + "&" });

      const stringSignTemp = stringA+"key=" + this.$config.WEIXIN_PAY_KEY;

      console.log("1000011111", stringSignTemp);

      const sign = parseMD5(stringSignTemp).toUpperCase()

      return sign;
    },
    pushOrder() {
      if (this.quantity < 1) return;

      if (!token.get()) {
        location.href = "/#/pages/login/wechart?redirect=" + this.redirect;
      }

      const invokeData: any = {
        "appId": this.appid,     //公众号名称，由商户传入
        "timeStamp": parseInt((new Date().getTime() / 1000).toString()).toString(),         //时间戳，自1970年以来的秒数
        "nonceStr": this.wechatRandom(), //随机串
        "package": "prepay_id=" + this.prepayId,
        "signType": this.signType
      };

      const paySign = this.wechatSign(invokeData);

      invokeData.paySign = paySign;

      console.log(invokeData);

      (window as any).WeixinJSBridge.invoke(
        'getBrandWCPayRequest', invokeData,
        (payResult: any) => {
          console.log(payResult);
          if(payResult.err_msg == "get_brand_wcpay_request:ok" ){
            uni.showToast({
              title: "微信支付成功",
            });
          } else {
            uni.showToast({
              title: "微信支付失败",
            });
          }
          location.reload();
        }
      );
    },
    toQrcodePage() {
      location.href = "/#/pages/order/qrcode?id=" + this.id
    }
  }
})
</script>
<style lang="scss" scoped>
.push-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header-container {
  color: #fff;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
  background: #006b65;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  overflow: auto;
}

.store-tip {
  display: flex;
  padding: 0px 15px;
}

.store-tip img {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.store-tip text {
  color: #999999;
  font-size: 12px;
}

.store-tip .right {
  flex-grow: 1;
  text-align: right;
}

.title-container {
  color: #333333;
  font-size: 24px;
  padding: 5px 15px;
}

.mainimg-container {
  padding: 15px;
}

.mainimg-container img {
  width: 100%;
  border-radius: 8px;
}

.time-select-container {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.time-option-container {
  color: #333333;
  font-size: 12px;
  width: 24%;
  padding: 10px;
  border: 1px solid #999999;
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: 15px;
  background-color: #FFFFFF;
}

.time-option-container.active {
  color: #FFFFFF;
  background-color: #FFB838;
  border-color: #FFB838;
}

.form-container {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.form-container .form-item {
  padding: 15px 0px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #cccccc;
}

.form-container .form-item .label {
  color: #333333;
  font-size: 16px;
}

.count-ctrl {
  width: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.count-ctrl .iconfont {
  font-size: 16px;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  border-radius: 9px;
}

.count-ctrl .iconfont.icon-plus {
  color: #FFFFFF;
  background-color: #006b65;
}

.count-ctrl .count {
  color: #333333;
  font-size: 16px;
}

.uni-textarea-placeholder {
  font-size: 16px;
}

.list {
  display: flex;
  flex-direction: column;
}

.list .item {
  display: flex;
  justify-content: space-between;
}

.list .item .type {
  color: #666666;
  font-size: 16px;
}

.list .item .detail {
  color: #333333;
  font-size: 16px;
}

.list .item .detail.im {
  color: #FFB838;
}

.message-container {
  color: #666666;
  font-size: 16px;
  padding: 15px;
}
.footer-container {
  height: 40px;
  padding: 10px 15px;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-container .pirce {
  color: #666666;
  font-size: 16px;
}

.footer-container .action-btn {
  color: #FFFFFF;
  font-size: 16px;
  background: #006b65;
  padding: 5px;
  border-radius: 8px;
}

.footer-container .action-btn.disabled {
  color: #FFFFFF;
  background-color: #abbfbf;
}

.alert {
  padding: 15px;
}

.alert .alert-wrapper {
  font-size: 14px;
  color: #888888;
  display: flex;
  padding: 12px;
  border-radius: 5px;
}

.alert.warning .alert-wrapper {
  background-color: #ffd1b5;
}

.alert.info .alert-wrapper {
  background-color: #eee;
}

.alert .alert-wrapper .icon {
  color: #006b65;
  margin-right: 5px;
  flex-shrink: 0;
}

.alert .alert-wrapper .message {
  flex-grow: 1;
}

.alert .alert-wrapper .action {
  flex-shrink: 0;
}

.good-info-container,.order-info-container {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.good-info-container .title,.order-info-container .title {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
}

.good-info-container .content,.order-info-container .content {
  display: flex;
}

.good-info-container .content .good-img-container {
  flex-grow: 1;
  display: flex;
  font-size: 14px;
}

.good-info-container .content .good-img-container img {
  width: 40vw;
  height: 30vw;
}

.good-info-container .content .info-container {
  padding-left: 15px;
}

.good-info-container .content .info-container .good-name {
  font-weight: bold;
  margin-bottom: 6vw;
}

.good-info-container .content .info-container .price-count {}

.good-info-container .content .info-container .total-price {
  color: #ff0000;
  font-weight: bold;
  margin-top: 6vw;
}

.order-info-container .content {
  color: #666;
  font-size: 14px;
  background: #eeeeee;
  padding: 15px;
  border-radius: 10px;
  flex-direction: column;
}

.order-info-container .item-container {
  display: flex;
  justify-content: space-between;
}


</style>
